<template>
  <div class="page-design">
    <div class="header">
      <div class="back" @click="goBack">
        <i class="iconfont-sys">&#xe866;</i>
        返回系统
      </div>
      <div class="right-btn">
        <p class="btn-item" @click="styleType = 1">
          <img src="../../assets/img/setting.png" class="setting-icon" />
          页面设置
        </p>
        <p style="margin-left: 36px" @click="handlePreview">保存并预览</p>
        <p style="margin-left: 36px" v-loading="saveLoading" @click="handleSave">保存</p>
      </div>
    </div>
    <div class="main-content">
      <div class="left">
        <div class="component-all-item" v-for="(item, index) in componentAllList" :key="index">
          <div class="component-header" @click="showBasicMore = !showBasicMore">
            <img class="expand-icon" v-if="!showBasicMore" src="@/assets/img/expand-right.png" />
            <img class="expand-icon" v-else src="@/assets/img/expand-down.png" />
            <span class="title">{{ item.title }}</span>
          </div>
          <div v-if="showBasicMore">
            <VueDraggable
              v-model="item.sub_list"
              :animation="150"
              ghostClass="ghost"
              :group="{ name: 'people', pull: 'clone', put: false }"
              :clone="clone"
              :sort="false"
              class="component-classify-list"
            >
              <div
                class="component-classify-item"
                v-for="componentItem in item.sub_list"
                :key="componentItem.id"
                @click="handleSelectedComponentTemplate(componentItem)"
              >
                <div><img :src="componentItem.icon_img" style="width: 24px; height: 24px" /></div>
                <div class="title">{{ componentItem.title }}</div>
              </div>
            </VueDraggable>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="phone-preview">
          <div
            class="phone-header"
            :style="{ backgroundColor: pageForm.navBarBackground }"
            v-if="pageForm.navType === 1"
          ></div>
          <div
            class="phone-page-title"
            :style="{ backgroundColor: pageForm.navBarBackground }"
            v-if="pageForm.navType === 1"
          >
            <div class="page-title">{{ pageForm.pageName }}</div>
            <div class="capsule"></div>
          </div>
          <div class="component-content" :style="backgroundStyle">
            <div class="phone-header" v-if="pageForm.navType === 2"></div>
            <div class="capsule" v-if="pageForm.navType === 2"></div>
            <VueDraggable
              v-model="showComponentList"
              :animation="150"
              group="people"
              ghostClass="ghost"
              class="phone-container"
              :filter="'.el-scrollbar'"
              :preventOnFilter="false"
            >
              <div v-for="(item, index) in showComponentList" :key="item.id" class="component-item">
                <div @click="handleSelectedComponent(item)">
                  <component
                    :is-active-class="item.id == activeComponent.id ? 'active-component' : ''"
                    :is="componentMap[item.type]"
                    :component-data="item"
                    :component-type="1"
                    :page-set-Data="pageForm"
                  ></component>

                  <div class="component-operation" v-if="item.id == activeComponent.id">
                    <div class="icon-list">
                      <el-icon v-if="index !== 0" @click="moveUp(index)"><Top /></el-icon>
                      <el-icon
                        v-if="index !== showComponentList.length - 1"
                        @click="moveDown(index)"
                        ><Bottom
                      /></el-icon>
                      <el-popconfirm title="确定删除？" @confirm="handleDeleteComponent(index)">
                        <template #reference>
                          <el-icon><CircleClose /></el-icon>
                        </template>
                      </el-popconfirm>
                    </div>
                  </div>
                </div>
              </div>
            </VueDraggable>
          </div>
        </div>
      </div>
      <div class="right">
        <div v-if="styleType === 2">
          <component
            :key="activeComponent.id"
            :is="componentMap[activeComponent.type]"
            :component-data="activeComponent"
            :component-type="styleType"
            @updateProps="(value: any) => handleUpdateData(value)"
          ></component>
        </div>

        <div class="page-set" v-if="styleType === 1">
          <div>
            <h3>基础设置</h3>
            <div class="line"></div>
            <el-form :model="pageForm" label-position="left" label-width="auto">
              <el-form-item label="页面标题">
                <el-input v-model="pageForm.pageName" placeholder="请输入页面标题"></el-input>
              </el-form-item>
              <el-form-item label="列表标题">
                <el-input v-model="pageForm.name" placeholder="请输入列表标题"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  v-model="pageForm.remark"
                  placeholder="请输入备注"
                  type="textarea"
                  :rows="3"
                ></el-input>
              </el-form-item>
              <h3 style="margin-top: 50px">样式设置</h3>
              <div class="line"></div>
              <el-form-item label="页面背景">
                <el-radio-group v-model="pageForm.bgType">
                  <el-radio :value="1">自定义颜色</el-radio>
                  <el-radio :value="2">自定义图片</el-radio>
                </el-radio-group>
              </el-form-item>
              <div>
                <div
                  v-if="pageForm.bgType === 1"
                  style="display: flex; align-items: center; margin-left: 68px; margin-bottom: 20px"
                >
                  <el-color-picker v-model="pageForm.bgColor"></el-color-picker>
                  <el-input style="width: 160px; margin-left: 10px" v-model="pageForm.bgColor">
                    <template #append>
                      <el-button @click="pageForm.bgColor = '#f5f5f5'">重置</el-button>
                    </template>
                  </el-input>
                </div>
                <div v-if="pageForm.bgType === 2">
                  <div class="avatar-uploader" @click="showImageChooseDialog = true">
                    <el-image
                      v-if="pageForm.bgImageUrl"
                      :src="pageForm.bgImageUrl"
                      class="avatar"
                      fit="cover"
                    ></el-image>
                    <i v-else class="el-icon-plus avatar-uploader-icon"
                      ><el-icon> <Plus /> </el-icon
                    ></i>
                    <div v-if="pageForm.bgImageUrl" class="mask">替换</div>
                    <el-icon
                      v-if="pageForm.bgImageUrl"
                      class="del-image"
                      :size="20"
                      @click.stop="handleDelBackgroundImage"
                      ><CircleCloseFilled
                    /></el-icon>
                  </div>
                  <p class="tip">建议图片尺寸为375x710像素</p>
                </div>
              </div>
              <el-form-item label="顶部导航栏">
                <el-radio-group v-model="pageForm.navType">
                  <el-radio :value="1">标准模式</el-radio>
                  <el-radio :value="2">沉浸式</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="顶部背景" v-if="pageForm.navType === 1">
                <div style="display: flex; align-items: center">
                  <el-color-picker v-model="pageForm.navBarBackground"></el-color-picker>
                  <el-input
                    style="width: 160px; margin-left: 10px"
                    v-model="pageForm.navBarBackground"
                  >
                    <template #append>
                      <el-button @click="pageForm.navBarBackground = '#fff'">重置</el-button>
                    </template>
                  </el-input>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>

    <preview-dialog
      v-if="showPreviewDialog"
      :show-preview-dialog="showPreviewDialog"
      :preview-data="previewData"
      @close-dialog="showPreviewDialog = false"
    ></preview-dialog>

    <image-selected-dialog
      v-if="showImageChooseDialog"
      :single-type="true"
      :operation-type="false"
      :show-image-choose-dialog="showImageChooseDialog"
      @close-dialog="handleCloseImageDialog"
    ></image-selected-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { VueDraggable } from 'vue-draggable-plus'
  import { Top, Bottom, CircleClose, Plus } from '@element-plus/icons-vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { componentListData } from './diyComponents/defaultComponentData'
  import { memberComponentListData } from './diyComponents/MembeCenterComponent'
  import cloneDeep from 'lodash/cloneDeep'

  import {
    addDiyPage,
    editDiyPage,
    getPageDetail,
    getTemplateDetail,
    getComponentBindData
  } from '@/api/materialManagement'

  import { couponsList, getActivityInfo } from '@/api/marketing'

  import { getCanSelectQuestion } from '@/api/questionbank'
  import ImageSelectedDialog from '@/views/decoration/diyComponents/ImageSelectedDialog.vue'
  import PreviewDialog from '@/views/decoration/diyComponents/PreviewDialog.vue'
  import CarouselSetting from './diyComponents/CarouselComponent/CarouselSetting.vue'
  import CategoryNavSetting from './diyComponents/CategoryNavComponent/CategoryNavSetting.vue'
  import GoodsSetting from './diyComponents/GoodsCardComponent/GoodsSetting.vue'
  import InfoSetting from './diyComponents/InfoComponent/InfoSetting.vue'
  import InfoCardSetting from './diyComponents/InfoCardComponent/InfoCardSetting.vue'
  import CategoryGoodsSetting from './diyComponents/CategoryGoodsComponent/CategoryGoodsSetting.vue'
  import NoticeSetting from './diyComponents/NoticeComponent/NoticeSetting.vue'
  import VideoPlaySetting from './diyComponents/VideoPlayComponent/VideoPlaySetting.vue'
  import CouponCardSetting from './diyComponents/CouponCardComponent/CouponCardSetting.vue'
  import QuestionCardSetting from './diyComponents/QuestonLayoutComponent/QuestionSetting.vue'
  import ImgSetting from './diyComponents/ImageComponent/ImageSetting.vue'
  import TitleSetting from './diyComponents/TitleComponent/TitleSetting.vue'
  import DividerSetting from './diyComponents/DividerComponent/DividerSetting.vue'
  import NavLinkSetting from './diyComponents/NavLInkComponent/NavLinkSetting.vue'
  import CubeSetting from './diyComponents/CubeComponent/CubeSetting.vue'
  import EmptyAreaSetting from './diyComponents/EmptyAreaComponent/EmptyAreaSetting.vue'
  import GoodsFlashSetting from './diyComponents/GoodsFlashComponent/GoodsFlashSetting.vue'
  import VideoCourseSetting from './diyComponents/VideoCourseComponent/VideoCourseSetting.vue'
  import VideoSingleCourseSetting from './diyComponents/VideoSingleCourseComponent/VideoSingleCourseSetting.vue'
  import MemberCenterSetting from './diyComponents/MemberCenterComponent/MemberCenterSetting.vue'
  import CarModelChangeSetting from './diyComponents/CarModelChangeComponent/CarModelChangeSetting.vue'
  import CategoryStatisticsSetting from './diyComponents/CategoryStatisticsComponent/CategoryStatisticsSetting.vue'
  import ArticleSetting from './diyComponents/ArticleComponent/ArticleSetting.vue'
  import AddDesktopSetting from './diyComponents/AddDesktopComponent/AddDesktopSetting.vue'

  const componentMap: Record<string, Component> = {
    carousel: CarouselSetting,
    category_nav: CategoryNavSetting,
    goods: GoodsSetting,
    info: InfoSetting,
    info_card: InfoCardSetting,
    category_goods: CategoryGoodsSetting,
    notice: NoticeSetting,
    video_play: VideoPlaySetting,
    coupon: CouponCardSetting,
    question: QuestionCardSetting,
    img: ImgSetting,
    nav_title: TitleSetting,
    divider: DividerSetting,
    nav_link: NavLinkSetting,
    cube: CubeSetting,
    empty_area: EmptyAreaSetting,
    goods_flash: GoodsFlashSetting,
    video_course: VideoCourseSetting,
    video_course_single: VideoSingleCourseSetting,
    member_info: MemberCenterSetting,
    car_info: CarModelChangeSetting,
    category_info: CategoryStatisticsSetting,
    article: ArticleSetting,
    add_desktop: AddDesktopSetting
  }

  const router = useRouter()
  const route = useRoute()
  const showPreviewDialog = ref(false)
  const previewData = ref({})
  const styleType = ref(1)
  const componentKey = ref(0)
  const saveLoading = ref(false)
  const templateId = ref<any>('-1')
  const showBasicMore = ref(true)
  const editId = ref<any>('')
  const showImageChooseDialog = ref(false)

  const pageForm = ref({
    name: '列表标题',
    pageName: '个人中心',
    remark: '',
    bgType: 2,
    bgImageUrl: 'https://image.lutongjiakao.com/system/d58f219c54af49649619ad07d8f57bf0.png',
    bgColor: '#f5f5f5',
    navBarBackground: '#fff',
    navType: 1
  })

  const backgroundStyle = computed(() => {
    if (pageForm.value.bgType === 2) {
      return {
        backgroundImage: `url(${pageForm.value.bgImageUrl})`,
        width: '100%',
        backgroundSize: 'contain',
        backgroundRepeat: 'no-repeat',
        paddingTop: '50px'
        // height: '100vh'
      }
    } else {
      return {
        backgroundColor: pageForm.value.bgColor
      }
    }
  })

  const activeComponent = ref<any>({})

  const showComponentList = ref<any[]>([])

  const userCenterComponent = componentListData.map((category) => ({
    ...category,
    sub_list: category.sub_list.filter(
      (sub: any) =>
        ![
          'question',
          'video_play',
          'video_course',
          'video_course_single',
          'cube',
          'goods'
        ].includes(sub.type)
    )
  }))

  const componentAllList = [
    ...memberComponentListData,
    ...userCenterComponent.filter((item: any) => item.type !== 'shop')
  ]

  function clone(element: Record<any, string>) {
    return {
      ...element,
      id: new Date().getTime()
    }
  }

  function handleSelectedComponentTemplate(item: any) {
    let obj = cloneDeep(item)
    obj.id = new Date().getTime()
    showComponentList.value.push(obj)
    activeComponent.value = obj
    styleType.value = 2
  }

  function handleSelectedComponent(item: any) {
    activeComponent.value = item
    styleType.value = 2
  }

  function handleUpdateData(value: any) {
    let index = showComponentList.value.findIndex((item: any) => item.id === value.id)
    if (index !== -1) {
      showComponentList.value[index] = value
      componentKey.value = new Date().getTime()
    }
  }

  function handleDeleteComponent(index: number) {
    showComponentList.value.splice(index, 1)
  }

  function moveUp(index: number) {
    if (index <= 0) return
    const temp = showComponentList.value[index]
    showComponentList.value[index] = showComponentList.value[index - 1]
    showComponentList.value[index - 1] = temp
  }

  function moveDown(index: number) {
    if (index >= showComponentList.value.length - 1) return
    const temp = showComponentList.value[index]
    showComponentList.value[index] = showComponentList.value[index + 1]
    showComponentList.value[index + 1] = temp
  }

  function handlePreview() {
    let obj = {
      backgroundStyle: backgroundStyle.value,
      pageForm: pageForm.value,
      showComponentList: showComponentList.value
    }
    previewData.value = JSON.parse(JSON.stringify(obj))
    showPreviewDialog.value = true

    handleSave()
  }

  function handleSave() {
    if (editId.value) {
      handleEditPage()
    } else {
      handleAddPage()
    }
  }

  async function handleAddPage() {
    try {
      saveLoading.value = true
      let obj: Record<string, any> = {
        name: pageForm.value.name,
        pageName: pageForm.value.pageName,
        pageType: 3,
        remark: pageForm.value.remark,
        source: 1,
        pageForm: JSON.stringify(pageForm.value),
        property: JSON.stringify(showComponentList.value)
      }

      if (templateId.value !== '-1') {
        obj.templateId = templateId.value
        obj.source = 0
      }

      const res = await addDiyPage(obj)
      if (res.code === '00000') {
        // goBack()
        editId.value = res.data.id
        router.push(`/userCenterPageDiy/userCenterDesign?type=edit&id=${res.data.id}&pageValue=3`)
        ElMessage.success('保存成功')
      }
    } catch (e) {
    } finally {
      saveLoading.value = false
    }
  }

  async function handleEditPage() {
    try {
      saveLoading.value = true
      let obj: Record<string, any> = {
        name: pageForm.value.name,
        pageName: pageForm.value.pageName,
        remark: pageForm.value.remark,
        pageType: 3,
        source: 1,
        pageForm: JSON.stringify(pageForm.value),
        property: JSON.stringify(showComponentList.value)
      }

      if (templateId.value !== '-1') {
        obj.templateId = templateId.value
        obj.source = 0
      }

      const res = await editDiyPage(editId.value, obj)
      if (res.code === '00000') {
        // goBack()
        ElMessage.success('保存成功')
      }
    } catch (e) {
    } finally {
      saveLoading.value = false
    }
  }

  async function getPageData(id: string) {
    const res = await getPageDetail(id)
    if (res.code === '00000') {
      templateId.value = res.data.templateId

      pageForm.value = JSON.parse(res.data.pageForm)
      showComponentList.value = JSON.parse(res.data.property)

      for (let i = 0; i < showComponentList.value.length; i++) {
        const item = showComponentList.value[i]
        if (item.api_url) {
          const newData = await getComponentData(item.api_url, item)
          if (item.type === 'category_goods') {
            item.tabs.forEach((tab: any, index: number) => {
              if (newData && newData[index].sortAoList && newData[index].sortAoList.length > 0) {
                tab.default_sub_list = newData[index].sortAoList
              }
            })
          } else if (item.type === 'goods') {
            let data = newData.find((_item: any) => _item.type === item.data_type)
            if (data && data.sortAoList.length > 0) {
              item.default_sub_list = data.sortAoList
            }
          } else if (item.type === 'video_course') {
            let oldItem = item.default_sub_list
            let showData = newData ? newData[0].sortAoList : []
            showData.forEach((e: any) => {
              let obj = oldItem.find((_item: any) => _item.id === e.id)
              if (obj) {
                e.link = obj.link
              }
            })
            item.default_sub_list = showData
          } else if (item.type === 'video_course_single') {
            let oldItem = item.default_sub_list
            let showData = newData ? newData[0].sortAoList : []
            showData.forEach((e: any) => {
              let obj = oldItem.find((_item: any) => _item.id === e.id)
              if (obj) {
                e.link = obj.link
              }
            })
            item.default_sub_list = showData
            if (showData.length) {
              const courseDetail = await getSpecialQuestionData(showData[0])
              item.course_detail_list = courseDetail
            }
          } else if (item.type === 'article') {
            let data = newData.find((_item: any) => _item.type === item.data_type)
            item.default_sub_list = data ? data.sortAoList || [] : []
          }
        }

        if (item.type === 'goods_flash') {
          if (item.activityId) {
            const data = await getFlashGoodsData(item)
            item.startTime = data.startTime
            item.endTime = data.endTime
            item.activityStatus = data.activityStatus
            item.default_sub_list = data.activityContentAoList
          }
        } else if (item.type === 'coupon') {
          let ids = item.default_sub_list.map((item: any) => item.id)
          item.default_sub_list = await getCouponData(ids)
        }
      }
    } else {
      ElMessage.error(res.msg)
    }
  }

  async function getComponentData(url: string, item: any) {
    let paramsData = {}

    if (item.type === 'category_goods') {
      const obj = item.tabs.map((tab: any) => {
        return {
          type: tab.type,
          ids: tab.default_sub_list.map((e: any) => e.id) || []
        }
      })
      paramsData = { sortVoList: obj }
    } else if (item.type === 'goods') {
      const obj = [
        {
          type: item.data_type,
          ids: item.default_sub_list.map((e: any) => e.id)
        }
      ]
      paramsData = { sortVoList: obj }
    } else if (item.type === 'video_course') {
      const obj = [
        {
          type: 'video',
          ids: item.default_sub_list.map((e: any) => e.id)
        }
      ]
      paramsData = {
        sortVoList: obj
      }
    } else if (item.type === 'article') {
      const obj = [
        {
          type: item.data_type,
          ids: item.default_sub_list.map((e: any) => e.id)
        }
      ]
      paramsData = { sortVoList: obj }
    }

    const res = await getComponentBindData(url, paramsData)

    if (res.code === '00000') {
      return res.data
    } else {
      return []
    }
  }

  async function getSpecialQuestionData(item: any) {
    const res = await getCanSelectQuestion({
      pageNum: 1,
      pageSize: 1000,
      isGroup: '01',
      groupId: item.id
    })
    if (res.code === '00000') {
      return res.data.list
    }
  }

  async function getFlashGoodsData(item: any) {
    const res = await getActivityInfo(item.activityId)
    if (res.code === '00000') {
      return res.data
    }
  }

  async function getCouponData(ids: any) {
    const res = await couponsList({
      couponIdList: ids
    })
    if (res.code === '00000') {
      return res.data ? res.data.list : []
    }
  }

  async function getTemplateData(id: string) {
    const res = await getTemplateDetail(id)
    if (res.code === '00000' && res.data.property) {
      pageForm.value = JSON.parse(res.data.pageForm)
      showComponentList.value = JSON.parse(res.data.property)
    } else {
      ElMessage.error(res.msg)
    }
  }

  function goBack() {
    ElMessageBox.confirm('确定退出吗，如有改动请先保存再退出', '确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      router.push('/decoration/driving_school_decoration/weapp_diy')
    })
  }

  function handleCloseImageDialog(value: any) {
    if (value) {
      pageForm.value.bgImageUrl = value.fileUrl
    }
    showImageChooseDialog.value = false
  }

  function handleDelBackgroundImage() {
    pageForm.value.bgImageUrl = ''
  }

  onMounted(() => {
    let operaType = route.query.type
    if (operaType === 'edit') {
      editId.value = route.query.id
      getPageData(editId.value)
    } else if (operaType === 'add' && route.query.templateId) {
      templateId.value = route.query.templateId
      getTemplateData(templateId.value)
    }
  })
</script>

<style scoped lang="scss">
  .page-design {
    width: 100%;
    height: 100vh;

    .header {
      position: relative;
      width: 100%;
      height: 58px;
      background-color: #212c3d;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 26px;
      border-bottom: 1px solid #f5f5f5;
      box-sizing: border-box;

      .back {
        cursor: pointer;
        color: #fff;
        font-size: 14px;
      }

      .right-btn {
        display: flex;
        align-items: center;
        color: #fff;

        p {
          cursor: pointer;
          font-size: 14px;
        }

        .btn-item {
          display: flex;
          align-items: center;

          .setting-icon {
            width: 20px;
            height: 20px;
            margin-right: 3px;
            color: #fff;
          }
        }
      }
    }

    .main-content {
      display: flex;
      justify-content: space-between;
      position: relative;
      width: 100%;
      height: calc(100% - 48px);
      //overflow-y: hidden;

      .left {
        width: 320px;
        background-color: #fff;
        display: flex;
        flex-direction: column;

        .component-all-item {
          display: flex;
          flex-direction: column;
          padding: 15px 0;
          cursor: pointer;

          .el-icon {
            font-size: 20px;
            margin-right: 10px;
          }

          .component-header {
            display: flex;
            align-items: center;
            padding: 0 10px;

            .expand-icon {
              width: 22px;
              height: 22px;
              margin-right: 5px;
              cursor: pointer;
            }

            .title {
              font-size: 14px;
              color: black;
              font-weight: bold;
            }
          }
        }

        .component-all-item.active {
          background-color: #fff;
        }

        .component-classify-list {
          background-color: #fff;
          display: flex;
          flex-wrap: wrap;
          padding: 12px;
          box-sizing: border-box;
          width: 320px;

          .component-classify-item {
            width: 80px;
            height: 80px;
            margin-right: 16px;
            margin-bottom: 16px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            background: #f8f9ff;
            border-radius: 8px;
            box-sizing: border-box;

            .icon {
              font-size: 20px;
            }

            .title {
              margin-top: 5px;
              font-weight: bold;
              font-size: 14px;
            }
          }

          .component-classify-item:hover {
            border: 1px solid var(--el-color-primary);
          }
        }
      }

      .center {
        flex: 1;
        background-color: #f4f5f8;
        display: flex;
        justify-content: center;
        padding: 40px 0 40px 0;
        overflow-y: auto;

        .phone-preview {
          width: 375px;
          height: 100%;

          .phone-header {
            position: relative;
            background-image: url(https://image.lutongjiakao.com/system/354d97034af84a0a9817ad0191d879d8.png);
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
            height: 44px;
          }

          .phone-page-title {
            width: 100%;
            height: 50px;
            line-height: 50px;
            box-sizing: border-box;
            position: relative;

            .page-title {
              font-weight: bold;
              color: black;
              position: absolute;
              top: 0;
              left: 150px;
            }

            .capsule {
              background-image: url(https://image.lutongjiakao.com/system/45557340b294468cb107823bdd1891b7.png);
              background-repeat: no-repeat;
              background-size: cover;
              width: 87px;
              height: 32px;
              position: absolute;
              top: 9px;
              right: 0;
              z-index: 9;
            }
          }

          .component-content {
            position: relative;

            .phone-header {
              position: absolute;
              top: 0;
              left: 0;
              background-image: url(https://image.lutongjiakao.com/system/354d97034af84a0a9817ad0191d879d8.png);
              background-repeat: no-repeat;
              background-size: cover;
              width: 100%;
              height: 44px;
              z-index: 19;
            }

            .capsule {
              background-image: url(https://image.lutongjiakao.com/system/45557340b294468cb107823bdd1891b7.png);
              background-repeat: no-repeat;
              background-size: cover;
              width: 87px;
              height: 32px;
              position: absolute;
              top: 44px;
              right: 0;
              z-index: 9;
            }
          }

          .phone-container {
            width: 375px;
            min-height: 667px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

            .component-item {
              position: relative;
              z-index: 2;

              //.active-component {
              //  border: 2px solid var(--el-color-primary);
              //}

              .component-operation {
                position: absolute;
                top: 0;
                right: -42px;
                width: 36px;
                height: 100px;
                background-color: #fff;
                box-shadow: 0 3px 3px #ccc;
                border-radius: 6px;

                .icon-list {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;

                  .el-icon {
                    font-size: 20px;
                    flex: 1;
                    cursor: pointer;

                    &:not(:last-child) {
                      border-bottom: 1px solid #ccc;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .right {
        width: 550px;
        background-color: #fff;
        overflow-y: auto;

        .page-set {
          padding: 20px;

          .line {
            width: 100%;
            height: 1px;
            background-color: #f5f7fa;
            margin: 20px 0;
          }

          .tip {
            font-size: 12px;
            color: #ccc;
            margin-left: 50px;
            margin-top: 10px;
            margin-bottom: 20px;
          }

          .type {
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            .title {
              margin-right: 20px;
              font-size: 16px;
              font-weight: bold;
            }
          }

          .avatar-uploader {
            border: 1px dashed #d9d9d9;
            border-radius: 12px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            width: 80px;
            height: 80px;
            margin-left: 80px;
            background-color: #fff;
            text-align: center;

            .mask {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 24px;
              background-color: rgba(0, 0, 0, 0.6);
              display: flex;
              align-items: center;
              justify-content: center;
              opacity: 0;
              transition: opacity 0.3s ease;
              color: #fff;
              font-size: 12px;
            }

            .del-image {
              display: none;
              position: absolute;
              top: 0;
              right: 0;
              cursor: pointer;
              color: #8c939d;
            }

            &:hover .mask {
              opacity: 1;
            }

            &:hover .del-image {
              display: block;
            }

            .avatar-uploader-icon {
              font-size: 28px;
              color: #8c939d;
              width: 80px;
              height: 80px;
              line-height: 80px;
              text-align: center;
            }
          }
        }
      }
    }
  }
</style>
